<template>
  <view class="container">
    <u-navbar :border-bottom="false" :is-back="false" title="" :background="{backgroundColor: 'rgba(0,0,0,0)'}">
      <view class="navbars u-f-ac u-f-jsb">
        <view class="u-f1">
          <u-icon @click="$u.route({type: 'back', delta: 1})" name="arrow-left" size="34" color="#fff"></u-icon>
        </view>
        <view class="u-f-ajc">
          <image src="/static/images/header.png" mode="widthFix"></image>
        </view>
        <view class="u-f1" style="text-align: right;">
          <u-button type="error" shape="circle" size="mini" :custom-style="customStyle1"
            @click="$u.route(`/mine-module/lingquan/order`)">订单</u-button>
        </view>
      </view>
    </u-navbar>

    <view class="num_box f-w-700 u-f-ajc u-f-column">
      <view>汇购活动</view>
    </view>

    <view class="content relative">

      <view class="list">
        <view class="item relative" v-for="(item, index) in list" :key="index">
          <view class="status absolute f-w-700" :class="item.status==0 ? 'status_active' : ''"
            v-if="item.status !== '' && item.status != undefined">
            {{options.find(item2 => item2.value == item.status).label}}
          </view>

          <view style="padding: 0 30rpx;">
            <view class="u-f-ac u-f-jsb">
              <view class="item_box u-f-ajc u-f-column">
                <view>{{details.least}}</view>
                <view>最低参与数量</view>
                <view class="bg_box u-f-ajc u-f-column">
                  <view>开始时间</view>
                  <view>{{item.start | unixToDate}}</view>
                </view>
              </view>
              <view class="item_box u-f-ajc u-f-column">
                <view>{{details.maximum}}</view>
                <view>最大参与数量</view>
                <view class="bg_box u-f-ajc u-f-column">
                  <view>结束时间</view>
                  <view>{{item.end | unixToDate}}</view>
                </view>
              </view>
            </view>
            <view class="u-f-ac u-f-jsb" v-if="item.status==0">
              <view>
                <view class="count_down u-f-ac">
                  <view>开团倒计时</view>
                  <u-count-down :show-days="false" :timestamp="computTime(item.start)" bg-color="#C61023" color="#fff"
                    separator-color="#fff" font-size="24" separator-size="24"></u-count-down>
                </view>
              </view>
              <view>
                <u-button type="success" :custom-style="customStyle" @click="yuyue(item, index)">汇购</u-button>
              </view>
            </view>
          </view>
        </view>
      </view>

    </view>

    <u-popup v-model="showPopup" mode="bottom" height="50%">
      <view class="popups">
        <view class="f-w-700 u-f-ac u-f-jsb popup_title">
          <view style="opacity: 0;">
            <u-icon name="close-circle"></u-icon>
          </view>
          <view>预约汇购</view>
          <view>
            <u-icon name="close-circle" size="40" @click="showPopup=false"></u-icon>
          </view>
        </view>
        <view class="inputs">
          <view class="input_title" style="margin-bottom: 30rpx;">汇购金额（{{details.least}}-{{details.maximum}}）</view>
          <view class="inpupt u-f-ac">
            <view class="f-w-700" style="font-size: 46rpx;"></view>
            <u-input v-model="money" type="number" :placeholder="`可用汇购券：${grabbing_amount}`"></u-input>
          </view>
        </view>

        <!-- <view class="inputs" style="margin-top: 40rpx;">
          <view class="input_title">支付密码</view>
          <view class="inpupt u-f-ac">
            <view class="f-w-700" style="font-size: 46rpx;">￥</view>
            <u-input v-model="accountForm.password" type="password" placeholder=" " height="50"></u-input>
          </view>
        </view> -->

        <view class="inputs" style="margin-top: 40rpx;">
          <view class="input_title">验证码</view>
          <view class="u-f">
            <!-- <image src="/static/images/login/code.png" class="form_icon" mode="widthFix"></image> -->
            <view style="width: 70%;">
              <u-input v-model="accountForm.captcha" placeholder="请输入图片验证码" maxlength="4" />
            </view>
            <u-image width="120" height="60" :src="captcha_url"
              @click="handleChangeCaptchalUrl"></u-image>
          </view>
        </view>

        <view style="padding: 50rpx;">
          <u-button type="success" @click="submit">立即汇购</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  import * as API_Common from '@/api/common.js';
  import * as API_Members from '@/api/members.js'
  import * as API_Malls from '@/api/malls.js';
  import * as API_Deposit from '@/api/deposit.js'

  import Cache, {
    Keys
  } from '@/utils/cache.js';
  import md5Libs from "@/libs/function/md5";
  export default {
    data() {
      return {
        customStyle: {
          height: '50rpx',
          backgroundColor: '#C61023',
        },
        items: {},
        showPopup: false,
        money: '',

        uuid: Cache.getItem(Keys.uuid),
        captcha_url: '', //图片验证码
        accountForm: {
          // password: '',
          captcha: '',
          uuid: Cache.getItem(Keys.uuid), //图片验证码验证参数需要
          scene: 'BET' //图片验证码验证参数需要
        },

        params: {
          pageNo: 1,
          pageSize: -1,
          positionId: '',
        },
        list: [],
        details: {},
        options: [{
            value: 0,
            label: '汇购中'
          },
          {
            value: 1,
            label: '已结束'
          },
          {
            value: 2,
            label: '已结算'
          },
          {
            value: 3,
            label: '爆仓'
          },
          {
            value: 4,
            label: '退回'
          },
        ],

        customStyle1: {
          backgroundColor: 'rgba(0,0,0,0)',
          color: '#fff',
          border: '1px solid #fff'
        },

        grabbing_amount: 0,

      }
    },
    onLoad(e) {
      uni.hideToast()
      if (e.id) this.params.positionId = e.id
      this.details = uni.getStorageSync('positionDetail')
      this.getMallPositionPeriods()
      this.memberInfo()
    },
    computed: {
      computTime() {
        return function(str) {
          if (str) {
            let now = new Date().getTime()
            return (Number(str) * 1000 - now) / 1000
          } else {
            return 0
          }
        }
      },

    },
    methods: {
      // 获取图片验证码
      handleChangeCaptchalUrl() {
        this.captcha_url = API_Common.getValidateCodeUrl(this.uuid, 'BET')
      },
      async memberInfo() {
        let res = await API_Members.memberInfo()
        this.grabbing_amount = res.info.grabbing_amount
      },

      async getMallPositionPeriods() {
        let res = await API_Malls.getMallPositionPeriods(this.params)
        this.list.push(...res.data)
      },
      InputEvent(e) {
        setTimeout(() => {
          if (this.money > this.details.maximum) this.money = this.details.maximum
          if (this.money < this.details.least) this.money = this.details.least
        }, 50)
      },
      yuyue(item, index) {
        console.log(item, index)
        uni.showModal({
          title: '温馨提示',
          content: '尊敬的会员,您好提交后会在活动开始第一时间汇购，但不保证100%成功,请您确认！',
          confirmText: '确定',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: (res) => {
            if (res.confirm) {
              this.items = item
              this.accountForm.captcha = ''
              this.handleChangeCaptchalUrl()
              this.showPopup = true
            }
          }
        })
      },
      submit() {
        if (!this.money) return this.$u.toast('请输入汇购金额')

        if (this.money > this.details.maximum) return this.$u.toast(`最大输入金额为${this.details.maximum}`)
        if (this.money < this.details.least) return this.$u.toast(`最小输入金额为${this.details.least}`)

        // if (!this.accountForm.password) return this.$u.toast('请输入正确的支付密码！')
        if (!this.accountForm.captcha) return this.$u.toast('请输入验证码！')
        this.showPopup = false
        uni.showModal({
          title: '再次提醒~',
          content: `尊敬的用户您好，您确认要汇购${this.money}元吗`,
          confirmText: '确定汇购',
          confirmColor: 'rgb(242, 20, 20)',
          cancelText: '取消',
          success: async (res) => {
            if (res.confirm) {
              let params = this.$u.deepClone(this.accountForm)
              // params.pwd = md5Libs.md5(this.accountForm.password)

              let res = await API_Malls.putMallPosition({
                amount: this.money,
                position_id: this.items.position_id,
              }, params)
              uni.showToast({
                title: '已提交，请在订单查看汇购结果！',
                icon: 'none',
                duration: 3600000
              })
              setTimeout(() => {
                uni.switchTab({
                  url: '/pages/tabs/mine/mine'
                })
              }, 1200)

            }
          }
        })
      },

    },
  }
</script>

<style lang="scss">
  page {
    background-color: #F1F1F1;
  }

  .content {
    padding: 0 20rpx;
    z-index: 99;

    .list {
      width: 100%;
      padding: 0 10rpx 0 20rpx;
    }

    .item {
      background-color: #fff;
      border-radius: 40rpx;
      border: 10rpx solid #F7C379;
      padding: 30rpx 20rpx 20rpx;
      margin-bottom: 30rpx;

      .item_box {
        width: 46%;
        font-weight: 700;
        margin: 20rpx 0 30rpx;

        .bg_box {
          width: 100%;
          margin-top: 10rpx;
          background-color: #F1F1F1;
          border-radius: 10rpx;
          padding: 14rpx 50rpx;
          text-align: center;
        }


      }

      .item_box:nth-of-type(2n) {
        .bg_box {
          background-color: #F9E0DC !important;
        }
      }

      .count_down {
        color: #fff;
        background-color: #C61023;
        border-radius: 10rpx;
        padding: 4rpx 10rpx;
        font-weight: 700;
        font-size: 26rpx;
      }



      .status {
        right: 0;
        top: 0;
        padding: 8rpx 30rpx;
        color: #fff;
        background-color: #C7D0CB;
        // border: 1px solid #707070;
        border-radius: 0 30rpx 0 30rpx;
      }

      .status_active {
        color: #fff;
        background-color: #07BD5E;
        // border: 1px solid #07BD5E;
      }
    }
  }

  .popups {
    width: 100%;
    height: 100%;
    padding: 30rpx 50rpx;

    .popup_title {
      margin-bottom: 30rpx;
    }

    .inputs {
      border-bottom: 1px solid #ccc;

      .input_title {
        color: #888;
      }
    }
  }
</style>


<style lang="scss">
  page {
    width: 100%;
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .container {
    background: url(/static/images/bg.png) no-repeat 0 0;
    background-size: cover;
  }

  .num_box {
    padding: 30rpx 0 60rpx;
    color: #FFDDAE;

    >view:nth-of-type(1) {
      font-size: 60rpx;
    }
  }
  .form_icon {
    width: 40rpx;
    margin-right: 40rpx;
  }
</style>
